import common from '@/styles/ts.module.scss'

const basicsFontSize = 14

export const FontSize = async (s: any) => {
    const heightRatio = 100 / (common as any).referanceWidth
    const width = window.innerWidth

    return Math.ceil(width * heightRatio * s)
}

export const PIE_TOOLTIP: any = {
    backgroundColor: 'rgba(0,0,0,0.6)',
    confine: true,
    borderWidth: '0',
    textStyle: {
        fontSize: basicsFontSize * 0.8,
        color: '#fff'
    },
    formatter: function (params: any) {
        let result = ''
        const dotHtml = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color}"></span>`
        result += `${dotHtml}
        ${params.data.name}
        </br>
  
    <span style="margin-left:30px;font-fa mily:SJyunhei ;">${params.data.value}</span>
        个`
        return result
    }
}

export const Rank_TOOLTIP: any = {
    backgroundColor: 'rgba(0,0,0,0.6)',
    borderWidth: '0',
    trigger: 'axis',
    textStyle: {
        fontSize: basicsFontSize,
        fontFamily: 'SJyunhei',
        color: '#fff'
    },
    axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function name(params: any) {
        let result = ''
        console.log(params)
        params.forEach((element: any) => {
            if (element.seriesName == '背景') return
            result += `
      <span style='color:rgba(255,255,255,0.58);margin-right:20px;font-size:14px;font-family: SJyunhei;'>${element.axisValue}:</span>
      <span style='font-family: SJyunhei;'>${element.value}</span><br/>`
        })
        return result
    }
}

export const Bar_TOOLTIP: any = {
    backgroundColor: 'rgba(0,0,0,0.6)',
    borderWidth: '0',
    trigger: 'axis',
    textStyle: {
        fontSize: basicsFontSize,
        fontFamily: 'SJyunhei',
        color: '#fff'
    },
    axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter: function name(params: any) {
        let result = ''
        params.forEach((element: any) => {
            if (element.seriesName == '背景') return
            result += `
      <span style='color:rgba(255,255,255,0.58);margin-right:20px;font-size:14px;font-family: SJyunhei;'>${element.seriesName}:</span>
      <span style='font-family: SJyunhei;'>${element.value}</span><br/>`
        })
        return result
    }
}

export const LINE_TOOLTIP: any = {
    backgroundColor: 'rgba(0,0,0,0.6)',
    borderWidth: '0',
    trigger: 'axis',
    textStyle: {
        fontSize: basicsFontSize,
        color: '#fff'
    },
    formatter: function name(params: any) {
        let result = ''
        console.log(params)
        params.forEach((element: any) => {
            if (element.seriesName == '背景') return
            let color = element.color
            if (element.color.colorStops.length > 0) {
                if (element.color.colorStops[0].color == 'transparent') {
                    color = element.color.colorStops[element.color.colorStops.length - 1].color
                } else {
                    color = element.color.colorStops[0].color
                }
            }
            result += `<span
                        style='display:inline-block;
                        margin-right:15px;
                        margin-left:10px;
                        border-radius:2px;
                        width:10px;
                        height:10px;
                        background-color:${color}
                      '></span>
      <span style='color:rgba(255,255,255,0.58);margin-right:20px;font-size:14px;font-family: SJyunhei;'>${element.seriesName}:</span>
      <span style='font-family: SJyunhei;'>${element.value}</span><br/>`
        })
        return result
    }
}
export const AXIS_LABEL: any = {
    //轴上的字 字体、样式
    interval: 0,
    inside: false,
    fontSize: basicsFontSize * 0.9,
    fontFamily: 'OPPOSans',
    color: 'rgba(255,255,255,.5)',
    padding: [0, 0, 0, 0],
    hideOverlap: false
    // margin: 5
}
export const YAXIS_NAME: any = {
    fontSize: basicsFontSize * 0.9,
    color: 'rgba(255,255,255,0.5)',
    align: 'left',
    verticalAlign: 'bottom',
    padding: [0, 0, 5, -20]
}
export const XAXIS_NAME: any = {
    fontFamily: 'OPPOSans',
    fontSize: basicsFontSize * 0.9,
    color: 'rgba(255,255,255,0.8)',
    align: 'center',
    verticalAlign: 'bottom',
    padding: [0, 0, 0, 20]
}
export const LEGEND: any = {
    padding: 5,
    fontSize: basicsFontSize * 0.9,
    color: 'rgba(255,255,255,0.8)'
}
export const lightColor = (col: string, amt = 0) => {
    let usePound = false
    if (col[0] == '#') {
        col = col.slice(1)
        usePound = true
    }
    const num = parseInt(col, 16)
    let r = (num >> 16) + amt

    if (r > 255) r = 255
    else if (r < 0) r = 0

    let b = ((num >> 8) & 0x00ff) + amt

    if (b > 255) b = 255
    else if (b < 0) b = 0

    let g = (num & 0x0000ff) + amt

    if (g > 255) g = 255
    else if (g < 0) g = 0

    return (usePound ? '#' : '') + String('000000' + (g | (b << 8) | (r << 16)).toString(16)).slice(-6)
}
